<template>
  <view class="">
    <view class="status">{{ data.status_text }}</view>
    <view class="info_box">
      <view class="box-top">
        <image :src="data.room.image" ></image>
        <view class="room_info">
          <view class="font-max">{{ data.room.name }}</view>
          <view class="info">
            <view class="info_left">
              <view class="grey">{{ data.private_room.name }}</view>
              <view class="grey">{{ data.date }}</view>
            </view>
            <view class="info_right">
              <view class="font-max font-wet500"><label class="font-mini">￥</label>{{ data.price}}</view>
              <view>押金 ￥{{ data.deposit }}</view>
            </view>

          </view>
          <view class="grey">{{ data.start_t}} - {{ data.end_t }}</view>
        </view>
      </view>
      <view class="box-bottom">
        <view class="info-item">
          <view>订单号</view>
          <view>{{ data.order_no }}</view>
        </view>
        <view class="info-item">
          <view>进场时间</view>
          <view>{{ data.start_time }} - {{ data.end_time }}</view>
        </view>
        <view class="info-item">
          <view>总价</view>
          <view>￥{{ data.total }}</view>
        </view>
        <view class="info-item">
          <view>余额支付</view>
          <view>￥{{ data.balance_price }}</view>
        </view>
        <view class="info-item">
          <view>微信支付</view>
          <view>￥{{ data.wx_price }}</view>
        </view>
      </view>
    </view>
    <view class="btns" v-if="data.status == 0">
      <view>继续支付</view>
      <view>取消订单</view>
    </view>
    <view class="btns" v-if="data.status == 1">
      <view @tap="openDoor">开门</view>
      <view @tap="refund">退款</view>
    </view>
    <view class="btns" v-if="data.status == 2">
      <view>退场</view>
    </view>
  </view>
</template>
<script>
export default{
  data() {
    return {
      order_no: '',
      data: {}
    }
  },
  onLoad: function(option){

    console.log(option);
    this.order_no = option.order_no

    uni.showLoading({
      title: '加载中...'
    });

    // 获取订单详情
    uni.$u.http.post('getRoomBookingRecordDetail', {
      'order_no': option.order_no
    }).then(res => {
      uni.hideLoading();
      if(res.code == 200){
        this.data = res.data
      }else{
        uni.showToast({
          title: '获取订单详情失败',
          icon: 'error',
          duration: 1000 // 提示框持续时间，单位为毫秒
        })
      }

      uni.hideLoading()
    }).catch(error => {
      uni.showToast({
        title: error.msg,
        icon: 'error',
        duration: 1000 // 提示框持续时间，单位为毫秒
      })
    })
  },
  methods: {
    openDoor: function(){
      uni.showToast({
        title: '功能开发中',
        icon: 'error',
        duration: 1000 // 提示框持续时间，单位为毫秒
      })
    },
    refund: function(){
      uni.$u.http.post('refund',{
        'order_no': this.order_no
      }).then(res => {
        if(res.code == 200){
          uni.showToast({
            title: '退款成功',
            icon: 'success',
            duration: 1000 // 提示框持续时间，单位为毫秒
          })
          let that = this;
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/selectOrder/index?order_no=' + that.order_no
            })
            console.log(123)
          }, 1000)

        }else{
          uni.showToast({
            title: res.msg,
            icon: 'error',
            duration: 3000 // 提示框持续时间，单位为毫秒
          })
        }
      }).catch(error => {
        uni.showToast({
          title: '退款失败, 请检查网络!',
          icon: 'fail',
          duration: 1000 // 提示框持续时间，单位为毫秒
        })
      })
    }
  }
}
</script>

<style>
.status{
  width: 100vw;
  text-align: center;
  padding: 40rpx 0;
  font-size: 34rpx;
  color: #333;
}
.info_box{
  width: calc(100vw - 40rpx);
  margin: 0 20rpx;
  background: #fff;
  padding:20rpx 0 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}
.box-top{
  display: flex;
}
.box-top image{
  width: 200rpx;
  height: 200rpx;
  object-fit: cover;
  border-radius: 30rpx;
  background: #ccc;
  margin-left: 20rpx;
  display: block;
}
.room_info{
  margin-left: 20rpx;
  width: calc(100vw - 40rpx - 40rpx - 200rpx - 20rpx);
  margin-right: 20rpx;
}
.info{
  width: 100%;
  /* height: 100%; */
  display: flex;
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 40rpx;
}
.info_left{
  max-width: 50%;
}
.info_right{
  max-width: 50%;
}
.info_right view{
  width:100%;
  text-align: right;
}
.font-mini{
  font-size: 24rpx !important;
}
.font-max{
  font-size: 32rpx;
}
.font-wet500{
  font-weight: 500;
}
.box-bottom{
  margin-top: 30rpx;
}
.info-item{
  width: calc(100% - 40rpx);
  display: flex;
  align-items: first baseline;
  justify-content: space-between;
  font-size: 25rpx;
  margin: 0 20rpx 40rpx;
}
.info-item view:nth-child(1){
  text-align: left;
}
.info-item view:nth-child(2){
  text-align: right;
}
.pay{
  width: calc(100% - 40rpx);
  text-align: right;
}
.btns{
  width: calc(100vw - 40rpx);
  margin: 40rpx 20rpx 0;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  padding: 20rpx 0;
  border-radius: 30rpx;
}
.btns view{
  width: 180rpx;
  margin-right: 20rpx;
  border: 2rpx solid #ccc;
  padding: 15rpx 0;
  font-size: 28rpx;
  text-align: center;
  border-radius: 30rpx;
  color: #333;
}

.grey{
  color: #777777;
}
</style>